<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-29 09:27:41
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 20:16:11
 * @Description: 团队精英
-->
<!--  -->
<template>
  <div id="productPage">
    <!-- 导航标签 -->
    <div class="target_content">
      <div class="main-content">
        您的位置:

        <router-link to="/" class="target">首页</router-link>
        <i class="fa fa-angle-right"></i>
        <router-link to="/teammate" class="target" style="color: #0072d4"
          >团队精英</router-link
        >
      </div>
    </div>

    <!-- 团队精英 -->
    <div class="main-content member" id="member_content">
      <div class="left invisible wow" ref="main_member" id="member_left">
        <img style="width: 300px; height: 300px" :src="main_member.img" alt="" />
        <div class="about_us">
          <h2>{{ main_member.name }}</h2>
          <h3>{{ main_member.position }}</h3>
          <p>
            {{ main_member.info }}
          </p>
        </div>
      </div>
      <div class="right" id="member_right">
        <div class="list_box">
          <ul id="member_ul" ref="member_ul" style="margin-top: 0px">
            <li
              :style="{ animationDelay: index * 0.3 + 's' }"
              :class="index + 1 === 1 ? 'active' : 'noactive'"
              class="invisible wow"
              v-for="(item, index) of members"
              :key="index"
              @click="changeMember($event, index)"
            >
              <img :src="item.img" alt="" />
              <h2>{{ item.name }}</h2>
              <h3>{{ item.position }}</h3>
            </li>
          </ul>
        </div>
        <span class="up" @click="toUp()"
          ><i class="fa fa-angle-up" aria-hidden="true"></i
        ></span>
        <span class="down" @click="toDown()"
          ><i class="fa fa-angle-down" aria-hidden="true"></i
        ></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      last_member: null,
      members: [
        {
          name: "雷军",
          position: "小米公司CEO",
          info:
            "雷军，男，汉族，1969年12月16日出生于湖北省仙桃市，无党派，大学学历，理学学士学位，高级工程师。 [1]  中国大陆著名天使投资人。雷军作为中国互联网代表人物及全球年度电子商务创新领袖人物 [2]  ，曾获中国经济年度人物及十大财智领袖人物、中国互联网年度人物 [3]  等多项国内外荣誉，并当选《福布斯》（亚洲版）2014年度商业人物。同时兼任金山、YY、猎豹移动等三家上市公司董事长。雷军曾任两届海淀区政协委员，2012年当选北京市人大代表，2013年2月当选全国人民代表大会代表。2017年12月，荣获2017“质量之光”年度质量人物奖。",
          img:
            "",
        },
      ],
      main_member: null,
    };
  },
  beforeMount() {
    this.main_member = this.members[0];
  },
  mounted() {
    document.getElementsByTagName('title')[0].innerHTML = '云旅 | 团队精英'

    this.$axios.get("/data.json").then((res) => {
      this.members = res.data.members;
      console.log(this.members);
    });
  },
  components: {},
  methods: {
    // 更换成员精英
    changeMember(ev, index) {
      this.$refs.main_member.classList.add("twinkle");
      if (this.last_member !== null) {
        this.last_member.classList.remove("active");
        this.last_member.classList.add("noactive");
      }
      this.last_member = ev.currentTarget;
      ev.currentTarget.classList.remove("noactive");
      ev.currentTarget.classList.add("active");
      setTimeout(() => {
        this.main_member = this.members[index];
      }, 250);
      setTimeout(() => {
        this.$refs.main_member.classList.remove("twinkle");
      }, 500);
    },

    // 向上拉动
    toUp() {
      let member_ul = this.$refs.member_ul;
      let top = parseInt(member_ul.style.marginTop);
      if (top >= 0) return;
      member_ul.style.marginTop = top + 100 + "px";
    },
    // 向下拉动
    toDown() {
      const max = 100 * (this.members.length - 3);
      let member_ul = this.$refs.member_ul;
      let top = parseInt(member_ul.style.marginTop);
      if (Math.abs(top) >= max) {
        return;
      }
      member_ul.style.marginTop = top - 100 + "px";
    },
  },
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";

#productPage {
  height: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  background-color: #fff;
}

#productPage .product-button {
  width: 100%;
  text-align: left;
}
.member {
  padding-top: 150px;
  padding-bottom: 90px;
}
</style>
